ExtJS একটি শক্তিশালী জাভাস্ক্রিপ্ট ফ্রেমওয়ার্ক যা ওয়েব অ্যাপ্লিকেশন তৈরি করতে ব্যবহৃত হয়। এটি বিভিন্ন ধরনের UI কম্পোনেন্ট এবং উইজেট সরবরাহ করে যা ডেভেলপারদের ইন্টারঅ্যাকটিভ এবং ডেটা-ড্রিভেন অ্যাপ্লিকেশন তৈরি করতে সাহায্য করে। এই কম্পোনেন্টগুলি ব্যবহারকারীর ইন্টারঅ্যাকশনের সাথে কাজ করতে পারে, ডেটা দেখাতে পারে এবং অ্যাপ্লিকেশনের বিভিন্ন ফাংশনালিটি প্রদান করে।

ExtJS Components এবং Widgets এর বেসিক ধারণা

Components এবং Widgets হল ExtJS এর মৌলিক বিল্ডিং ব্লক। এক্সটিজেএস এর কম্পোনেন্টগুলি বিভিন্ন ধরনের ইউজার ইন্টারফেস উপাদান যা অ্যাপ্লিকেশনে ব্যবহৃত হয়।

১. Components (কম্পোনেন্টস)

এক্সটিজেএস কম্পোনেন্টগুলি হল UI উপাদান যা অ্যাপ্লিকেশন তৈরি করার সময় ব্যবহৃত হয়। এগুলি প্যানেল, গ্রিড, ফর্ম, বাটন, উইন্ডো ইত্যাদি হতে পারে।

Components এর কিছু উদাহরণ:

• Ext.panel.Panel: সাধারণ প্যানেল কম্পোনেন্ট যা অন্যান্য কম্পোনেন্টগুলি ধারণ করতে পারে।
• Ext.grid.Panel: ডেটা গ্রিড যা তালিকা বা ডেটা প্রদর্শন করতে ব্যবহৃত হয়।
• Ext.button.Button: বাটন কম্পোনেন্ট যা ব্যবহারকারীর ক্লিক ইভেন্ট হ্যান্ডল করতে ব্যবহৃত হয়।
• Ext.form.Field: ফর্ম ফিল্ড কম্পোনেন্ট যা ব্যবহারকারীর ইনপুট গ্রহণ করতে ব্যবহৃত হয়।

কম্পোনেন্ট উদাহরণ:

Ext.create('Ext.panel.Panel', {
    title: 'My Panel',
    width: 400,
    height: 200,
    html: '<p>Welcome to ExtJS!</p>',
    renderTo: Ext.getBody() // রেন্ডার হবে HTML বডিতে
});

এখানে, Ext.panel.Panel একটি প্যানেল কম্পোনেন্ট তৈরি করে, যার মধ্যে কিছু HTML কন্টেন্ট রয়েছে এবং এটি Ext.getBody() এর মাধ্যমে রেন্ডার হচ্ছে।

২. Widgets (উইজেটস)

Widgets হল এক্সটিজেএস এর বিশেষ ধরনের কম্পোনেন্ট যা একটি নির্দিষ্ট কাজ বা ফিচার প্রদান করে। এগুলি সাধারাণত আরও কাস্টমাইজড এবং উচ্চ মানের ইউজার ইন্টারফেস উপাদান। উদাহরণস্বরূপ, ডেটা ভিউ, চার্ট, গ্রিড, উইন্ডো ইত্যাদি।

Widgets এর কিছু উদাহরণ:

• Ext.window.Window: একটি পপ-আপ উইন্ডো কম্পোনেন্ট যা ব্যবহারকারীর সাথে ইন্টারঅ্যাক্ট করার জন্য ব্যবহৃত হয়।
• Ext.grid.Panel: ডেটার লিস্ট প্রদর্শনের জন্য ব্যবহৃত গ্রিড উইজেট।
• Ext.form.Panel: ফর্ম উইজেট যা ব্যবহারকারীর ইনপুট গ্রহণের জন্য ব্যবহৃত হয়।
• Ext.chart.Chart: ডেটা ভিজ্যুয়ালাইজেশনের জন্য একটি চার্ট উইজেট।

উইজেট উদাহরণ:

Ext.create('Ext.window.Window', {
    title: 'My Window',
    width: 300,
    height: 200,
    layout: 'fit', // উইন্ডোর ভিতরে কনটেন্ট ফিট হবে
    items: [{
        xtype: 'panel',
        html: '<h2>Welcome to ExtJS Window</h2>'
    }],
    renderTo: Ext.getBody(),
    modal: true // এটি একটি মডাল উইন্ডো হবে
}).show();

এখানে Ext.window.Window একটি উইন্ডো উইজেট তৈরি করেছে, যা মডাল মোডে রেন্ডার হচ্ছে এবং এর ভিতরে একটি প্যানেল রয়েছে।

ExtJS Components এবং Widgets এর পার্থক্য

• Components সাধারণত কম্পোনেন্ট যা বিভিন্ন অ্যাপ্লিকেশনের জন্য ভিত্তি তৈরি করে। এগুলির মধ্যে রয়েছে প্যানেল, ফর্ম, বাটন ইত্যাদি।
• Widgets হল আরও উন্নত এবং নির্দিষ্ট ফিচার প্রদানকারী উপাদান, যেমন গ্রিড, উইন্ডো, চার্ট ইত্যাদি।

ExtJS এর কম্পোনেন্ট এবং উইজেট ব্যবহার করার সুবিধা

1. প্রিভিউ কনফিগারেশন: ExtJS কম্পোনেন্টগুলি উচ্চতর কাস্টমাইজেশন এবং নির্দিষ্ট বৈশিষ্ট্য সেটিংস নিয়ে আসে।
2. রেসপন্সিভ ডিজাইন: অনেক কম্পোনেন্ট এবং উইজেটের মধ্যে রেসপন্সিভ ডিজাইন সাপোর্ট রয়েছে, যা বিভিন্ন ডিভাইসে উপযুক্ত।
3. এন্টারপ্রাইজ লেভেল ফিচার: গ্রিড, টেবিল, চার্ট, এবং অন্যান্য উইজেটগুলি ডেটা-ড্রিভেন অ্যাপ্লিকেশন তৈরি করতে সাহায্য করে।
4. ইনটিগ্রেটেড টুলস: ExtJS উইজেটগুলি অন্যান্য ফিচার যেমন ফর্ম ভ্যালিডেশন, ডেটা ফিল্টারিং, এবং ইভেন্ট হ্যান্ডলিং সরবরাহ করে।

ExtJS Components এর কিছু উদাহরণ

1. Grid Panel (ডেটা গ্রিড): একটি গ্রিড কম্পোনেন্ট যা ডেটা প্রদর্শন করতে ব্যবহৃত হয়, যেমন একটি তালিকা বা ডেটা-ড্রিভেন অ্যাপ্লিকেশন।

   উদাহরণ:

   Ext.create('Ext.grid.Panel', {
       title: 'User List',
       store: {
           fields: ['id', 'name', 'email'],
           data: [
               { id: 1, name: 'John Doe', email: 'john@example.com' },
               { id: 2, name: 'Jane Smith', email: 'jane@example.com' }
           ]
       },
       columns: [
           { text: 'ID', dataIndex: 'id', flex: 1 },
           { text: 'Name', dataIndex: 'name', flex: 2 },
           { text: 'Email', dataIndex: 'email', flex: 3 }
       ],
       renderTo: Ext.getBody()
   });
   

2. Form Panel (ফর্ম প্যানেল): এটি ফর্ম ইনপুট ফিল্ড এবং সাবমিট বাটন ইত্যাদি ধারণ করে, যা ইউজারের ডেটা ইনপুট করার জন্য ব্যবহৃত হয়।

   উদাহরণ:

   Ext.create('Ext.form.Panel', {
       title: 'Login Form',
       width: 300,
       bodyPadding: 10,
       items: [
           { xtype: 'textfield', fieldLabel: 'Username', name: 'username' },
           { xtype: 'textfield', fieldLabel: 'Password', name: 'password', inputType: 'password' }
       ],
       buttons: [
           { text: 'Login', handler: function() { alert('Logged in!'); } }
       ],
       renderTo: Ext.getBody()
   });
   

সারাংশ

ExtJS কম্পোনেন্ট এবং উইজেটগুলি আপনাকে সমৃদ্ধ এবং ইন্টারঅ্যাকটিভ UI তৈরি করতে সাহায্য করে। Components সাধারণভাবে UI উপাদান তৈরি করার জন্য ব্যবহৃত হয়, যেমন প্যানেল, ফর্ম, এবং বাটন। অন্যদিকে, Widgets উন্নত UI ফিচার এবং ডেটা ভিজ্যুয়ালাইজেশন সরবরাহ করে, যেমন গ্রিড, উইন্ডো, এবং চার্ট। ExtJS এর কম্পোনেন্ট এবং উইজেটগুলি আপনাকে দ্রুত এবং স্কেলেবল ওয়েব অ্যাপ্লিকেশন তৈরি করতে সহায়ক।

ExtJS একটি শক্তিশালী জাভাস্ক্রিপ্ট ফ্রেমওয়ার্ক যা ডেটা-ড্রিভেন অ্যাপ্লিকেশন তৈরি করতে ব্যবহৃত হয়। ExtJS কম্পোনেন্টগুলি এই ফ্রেমওয়ার্কের মূল ভিত্তি এবং এটি ইউজার ইন্টারফেস (UI) নির্মাণে গুরুত্বপূর্ণ ভূমিকা পালন করে। প্রতিটি কম্পোনেন্ট একটি নির্দিষ্ট ধরনের ইউজার ইন্টারঅ্যাকশন বা ডেটা উপস্থাপন করে এবং অ্যাপ্লিকেশন ডেভেলপমেন্টে বিভিন্ন ধরনের ভিউ তৈরি করতে সহায়ক হয়।

ExtJS কম্পোনেন্টের ভূমিকা

ExtJS কম্পোনেন্টগুলি মডুলার, পুনঃব্যবহারযোগ্য এবং কনফিগারযোগ্য একক ইউনিট হিসেবে কাজ করে। এগুলি ভিউ (UI), কন্ট্রোল এবং ডেটার মধ্যে যোগাযোগ তৈরি করতে সহায়ক।

এক্সটিজেএস কম্পোনেন্টের ব্যবহার সহজতর করার জন্য এগুলি সাধারণত UI এলিমেন্ট যেমন বাটন, টেবিল, চার্ট, ফর্ম, গ্রিড ইত্যাদি নিয়ে গঠিত।

ExtJS কম্পোনেন্টের প্রধান ভূমিকা

1. ইউজার ইন্টারফেস উপাদান
   ExtJS কম্পোনেন্টগুলি ইউজার ইন্টারফেসের বিভিন্ন অংশ তৈরি করতে ব্যবহৃত হয়। কম্পোনেন্টগুলি একে অপরের সাথে যোগাযোগ করে অ্যাপ্লিকেশনের UI কে কার্যকর এবং ব্যবহারকারী বান্ধব করে তোলে।
2. কাস্টমাইজেশন ও কনফিগারেশন
   প্রতিটি কম্পোনেন্টের নিজস্ব কনফিগারেশন অপশন থাকে, যা দিয়ে আপনি তাদের আউটপুট, ডিজাইন, ফাংশন এবং ইন্টারঅ্যাকশন কাস্টমাইজ করতে পারেন।
3. ডেটা ম্যানিপুলেশন
   ExtJS কম্পোনেন্টগুলি ডেটা ফিল্টার, সোর্ট, পেজিনেশন এবং অ্যাডিটিংয়ের জন্য বিল্ট-ইন সমর্থন প্রদান করে। এতে ডেটা-ড্রিভেন অ্যাপ্লিকেশন তৈরি করা অনেক সহজ হয়ে যায়।
4. রেসপন্সিভ ডিজাইন এবং লেআউট
   ExtJS কম্পোনেন্টগুলি রেসপন্সিভ ডিজাইন সমর্থন করে, যা ডেস্কটপ এবং মোবাইল উভয় প্ল্যাটফর্মে অ্যাপ্লিকেশনকে সমানভাবে কার্যক্ষম রাখে।

ExtJS কম্পোনেন্টের ধরন

১. Panel (প্যানেল)

Panel হল ExtJS এর সবচেয়ে সাধারণ কম্পোনেন্ট, যা সাধারণত অন্যান্য কম্পোনেন্ট ধারণ করতে ব্যবহৃত হয়। এটি ট্যাব, ফর্ম, গ্রিড ইত্যাদি উপাদান ধারণ করতে সক্ষম।

উদাহরণ:

Ext.create('Ext.panel.Panel', {
    title: 'My Panel',
    width: 300,
    height: 200,
    html: 'This is a simple panel.',
    renderTo: Ext.getBody()
});

২. Grid (গ্রিড)

Grid কম্পোনেন্ট ডেটা টেবিল হিসেবে ব্যবহৃত হয়। এটি ডেটা প্রদর্শন, সোর্টিং, ফিল্টারিং, এবং এডিটিংয়ের জন্য ব্যাপকভাবে ব্যবহৃত হয়।

উদাহরণ:

Ext.create('Ext.grid.Panel', {
    title: 'User Data',
    store: {
        fields: ['name', 'email'],
        data: [
            { name: 'John', email: 'john@example.com' },
            { name: 'Jane', email: 'jane@example.com' }
        ]
    },
    columns: [
        { text: 'Name', dataIndex: 'name' },
        { text: 'Email', dataIndex: 'email' }
    ],
    renderTo: Ext.getBody()
});

৩. Button (বাটন)

Button কম্পোনেন্ট ইন্টারঅ্যাকশন বা ব্যবহারকারীর কর্মকাণ্ডের জন্য ব্যবহৃত হয়। এটি সাধারণত ইউজারকে কিছু কার্যক্রম সম্পাদন করতে দেয়, যেমন ডেটা সাবমিট বা কোনো ফাংশন চালানো।

উদাহরণ:

Ext.create('Ext.button.Button', {
    text: 'Click Me',
    renderTo: Ext.getBody(),
    handler: function() {
        alert('Button clicked!');
    }
});

৪. Form (ফর্ম)

Form কম্পোনেন্ট ডেটা গ্রহণের জন্য ব্যবহৃত হয়। এটি বিভিন্ন ইনপুট ফিল্ড, টেক্সটফিল্ড, চেকবক্স, রেডিও বাটন ইত্যাদি নিয়ে গঠিত।

উদাহরণ:

Ext.create('Ext.form.Panel', {
    title: 'Registration Form',
    bodyPadding: 5,
    width: 350,
    items: [{
        xtype: 'textfield',
        name: 'username',
        fieldLabel: 'Username',
        allowBlank: false
    }, {
        xtype: 'textfield',
        name: 'email',
        fieldLabel: 'Email',
        vtype: 'email'
    }],
    renderTo: Ext.getBody()
});

৫. Tab (ট্যাব)

Tab কম্পোনেন্ট একাধিক ভিউ বা প্যানেলকে একটি ট্যাব আকারে উপস্থাপন করতে ব্যবহৃত হয়। এটি ইউজারের জন্য ভিউ সুইচ করার সুবিধা দেয়।

উদাহরণ:

Ext.create('Ext.tab.Panel', {
    width: 400,
    height: 200,
    items: [{
        title: 'Tab 1',
        html: 'Content for tab 1'
    }, {
        title: 'Tab 2',
        html: 'Content for tab 2'
    }],
    renderTo: Ext.getBody()
});

৬. Chart (চার্ট)

Chart কম্পোনেন্ট ডেটা ভিজুয়ালাইজ করার জন্য ব্যবহৃত হয়, যেমন বার চার্ট, পাই চার্ট, লাইন চার্ট ইত্যাদি।

উদাহরণ:

Ext.create('Ext.chart.CartesianChart', {
    width: 400,
    height: 300,
    store: {
        fields: ['name', 'data1'],
        data: [
            { name: 'A', data1: 10 },
            { name: 'B', data1: 20 },
            { name: 'C', data1: 30 }
        ]
    },
    axes: [{
        type: 'category',
        position: 'bottom',
        fields: 'name'
    }, {
        type: 'numeric',
        position: 'left',
        fields: 'data1'
    }],
    series: [{
        type: 'bar',
        xField: 'name',
        yField: 'data1'
    }],
    renderTo: Ext.getBody()
});

ExtJS কম্পোনেন্টের উপকারিতা

1. রিচ ইউজার ইন্টারফেস (UI):
   ExtJS কম্পোনেন্টগুলি উন্নত UI উপাদান তৈরি করতে সহায়ক। যেমন, গ্রিড, ফর্ম, চার্ট ইত্যাদি।
2. কাস্টমাইজেশন:
   প্রতিটি কম্পোনেন্টে কাস্টম কনফিগারেশন অপশন থাকে, যার মাধ্যমে আপনি এটি আপনার প্রয়োজন অনুসারে কাস্টমাইজ করতে পারেন।
3. রেসপন্সিভ ডিজাইন:
   ExtJS কম্পোনেন্টগুলি রেসপন্সিভ ডিজাইন সাপোর্ট করে, যা মোবাইল এবং ডেস্কটপ প্ল্যাটফর্মে সমানভাবে কাজ করে।
4. ডেটা ম্যানিপুলেশন:
   ExtJS কম্পোনেন্টগুলি ডেটা ফিল্টার, সোর্টিং, পেজিনেশন, এবং এডিটিংয়ের জন্য বিল্ট-ইন সমর্থন প্রদান করে।
5. নির্ভরযোগ্যতা:
   ExtJS কম্পোনেন্টগুলি ব্যাপকভাবে পরীক্ষিত এবং স্ট্যাবল, যা বড় এবং জটিল অ্যাপ্লিকেশনগুলিতে ব্যবহার করা যায়।

সারাংশ

ExtJS কম্পোনেন্টগুলি একটি অ্যাপ্লিকেশনের UI তৈরির জন্য মূল ভূমিকা পালন করে। প্রতিটি কম্পোনেন্ট (যেমন: গ্রিড, প্যানেল, বাটন, ফর্ম, ট্যাব) একটি নির্দিষ্ট ফাংশন বা UI উপাদান উপস্থাপন করে এবং একে অপরের সাথে সমন্বয় করে একটি কার্যকর এবং ইন্টারেক্টিভ অ্যাপ্লিকেশন তৈরি করতে সহায়ক। ExtJS এর এই কম্পোনেন্টগুলির মাধ্যমে ডেভেলপাররা সহজেই ডেটা-ড্রিভেন অ্যাপ্লিকেশন তৈরি করতে পারেন।

ExtJS তে Components হচ্ছে ইউজার ইন্টারফেস (UI) তৈরির মৌলিক উপাদান। এটি বিভিন্ন UI এলিমেন্ট (যেমন গ্রিড, প্যানেল, বাটন, টেক্সটফিল্ড, ফর্ম ইত্যাদি) তৈরি করতে ব্যবহৃত হয়। প্রতিটি Component একটি নির্দিষ্ট কনফিগারেশন এবং প্রপার্টি সেটিংস দিয়ে কাস্টমাইজ এবং কনফিগার করা যেতে পারে।

Components এর সাধারণ বৈশিষ্ট্য

• xtype: কম্পোনেন্টের টাইপ বা ক্লাস।
• renderTo: কোন DOM এলিমেন্টে কম্পোনেন্ট রেন্ডার হবে।
• width / height: কম্পোনেন্টের আকার।
• items: প্যানেল বা কনটেইনারের মধ্যে রাখা অন্যান্য কম্পোনেন্ট।
• listeners: কম্পোনেন্টের ইভেন্ট হ্যান্ডলিং।

Components তৈরি করা

ExtJS তে কম্পোনেন্ট তৈরি করার জন্য Ext.create ব্যবহার করা হয়, যা কম্পোনেন্টের একটি ইনস্ট্যান্স তৈরি করে। এছাড়া, xtype ব্যবহার করে ক্লাস নামও সরাসরি ব্যবহার করা যায়।

১. প্যানেল (Panel) কম্পোনেন্ট তৈরি করা

প্যানেল হল একটি সাধারণ কনটেইনার যা অন্যান্য UI উপাদান ধারণ করতে ব্যবহৃত হয়। এটি সাধারণত টেক্সট, ইমেজ, গ্রিড, এবং অন্যান্য উপাদান প্রদর্শন করতে ব্যবহৃত হয়।

Ext.create('Ext.panel.Panel', {
    title: 'My Panel',
    width: 300,
    height: 200,
    html: '<p>This is a simple panel!</p>',
    renderTo: Ext.getBody() // DOM এর body তে রেন্ডার হবে
});

• title: প্যানেলের শিরোনাম।
• width / height: প্যানেলের আকার।
• html: প্যানেলের ভিতরের HTML কন্টেন্ট।
• renderTo: কম্পোনেন্টকে রেন্ডার করার এলিমেন্ট।

২. বাটন (Button) কম্পোনেন্ট তৈরি করা

একটি বাটন কম্পোনেন্ট ক্লিক ইভেন্টের মাধ্যমে কোনো কার্যকলাপ সম্পাদন করতে ব্যবহৃত হয়। এটি একটি মৌলিক ইনপুট কম্পোনেন্ট।

Ext.create('Ext.Button', {
    text: 'Click Me',
    renderTo: Ext.getBody(), // DOM এর body তে রেন্ডার হবে
    listeners: {
        click: function() {
            Ext.Msg.alert('Button Clicked', 'You clicked the button!');
        }
    }
});

• text: বাটনের লেখা।
• renderTo: বাটনটি কোন DOM এলিমেন্টে রেন্ডার হবে।
• listeners: বাটনের ক্লিক ইভেন্ট হ্যান্ডলার।

৩. গ্রিড (Grid) কম্পোনেন্ট তৈরি করা

গ্রিড কম্পোনেন্ট টেবিলের মতো ডেটা প্রদর্শনের জন্য ব্যবহৃত হয়। এটি সাধারণত ডেটার লিস্ট, সোর্টিং, ফিল্টারিং, এবং পেজিনেশন (pagination) সমর্থন করে।

Ext.create('Ext.grid.Panel', {
    title: 'User Grid',
    store: {
        fields: ['name', 'email'],
        data: [
            { name: 'John Doe', email: 'john.doe@example.com' },
            { name: 'Jane Smith', email: 'jane.smith@example.com' }
        ]
    },
    columns: [
        { text: 'Name', dataIndex: 'name' },
        { text: 'Email', dataIndex: 'email' }
    ],
    renderTo: Ext.getBody()
});

• store: গ্রিডের জন্য ডেটা স্টোর।
• columns: গ্রিডের কলামগুলো।
• dataIndex: গ্রিড কলামের জন্য ডেটা ইনডেক্স।

৪. টেক্সটফিল্ড (TextField) কম্পোনেন্ট তৈরি করা

টেক্সটফিল্ড ইউজারের ইনপুট নেওয়ার জন্য ব্যবহৃত হয়। এটি সাধারণত ফর্ম কম্পোনেন্ট হিসেবে ব্যবহৃত হয়।

Ext.create('Ext.form.field.Text', {
    fieldLabel: 'Name',
    name: 'name',
    renderTo: Ext.getBody()
});

• fieldLabel: ইনপুট ফিল্ডের লেবেল।
• name: ইনপুট ফিল্ডের নাম।
• renderTo: ফিল্ডটি কোন DOM এলিমেন্টে রেন্ডার হবে।

Components কনফিগার করা

ExtJS তে কম্পোনেন্ট কনফিগার করতে config এবং defaults অপশন ব্যবহার করা যায়, যা আপনাকে নির্দিষ্ট প্রপার্টি নির্ধারণ করতে সাহায্য করে। এছাড়া, listeners ব্যবহার করে ইভেন্ট হ্যান্ডলিংও করা যেতে পারে।

কনফিগারেশন উদাহরণ:

Ext.create('Ext.panel.Panel', {
    title: 'Configured Panel',
    width: 400,
    height: 300,
    bodyPadding: 10, // প্যানেলের ভিতরের প্যাডিং
    html: '<p>This is a configured panel with padding and customized width!</p>',
    layout: 'fit', // প্যানেলের লেআউট
    renderTo: Ext.getBody()
});

• bodyPadding: প্যানেলের ভিতরের প্যাডিং।
• layout: প্যানেলের লেআউট কনফিগার করা।

Dynamic Components তৈরি এবং কনফিগার করা

আপনি যদি কাস্টম কম্পোনেন্ট বা ডায়নামিক কম্পোনেন্ট তৈরি করতে চান, তবে আপনাকে xtype এবং items ব্যবহার করতে হবে। উদাহরণস্বরূপ:

Ext.create('Ext.container.Viewport', {
    layout: 'border',
    items: [{
        xtype: 'panel',
        region: 'north',
        title: 'Header Panel',
        height: 50
    }, {
        xtype: 'grid',
        region: 'center',
        title: 'Main Grid',
        store: {
            fields: ['name', 'email'],
            data: [
                { name: 'John', email: 'john@example.com' },
                { name: 'Jane', email: 'jane@example.com' }
            ]
        },
        columns: [{
            text: 'Name',
            dataIndex: 'name'
        }, {
            text: 'Email',
            dataIndex: 'email'
        }]
    }]
});

এখানে xtype ব্যবহার করে আমরা panel এবং grid কম্পোনেন্টগুলি ডায়নামিকভাবে তৈরি করেছি এবং region এর মাধ্যমে তাদের পজিশন নির্ধারণ করেছি।

সারাংশ

• Ext.create এবং xtype ব্যবহার করে সহজে কম্পোনেন্ট তৈরি করা যায়।
• renderTo দিয়ে কম্পোনেন্টকে DOM এ রেন্ডার করা যায়।
• listeners দিয়ে ইভেন্ট হ্যান্ডলিং করা সম্ভব।
• items কনফিগারেশন ব্যবহার করে কম্পোনেন্টের ভিতরে অন্যান্য কম্পোনেন্ট যোগ করা যায়।
• layout এবং bodyPadding এর মাধ্যমে UI কনফিগারেশন আরও কাস্টমাইজ করা যায়।

ExtJS তে কম্পোনেন্ট তৈরি এবং কনফিগার করার এই পদ্ধতিগুলি আপনার অ্যাপ্লিকেশন তৈরির প্রক্রিয়াকে আরও সহজ এবং কার্যকরী করে তোলে।

ExtJS একটি শক্তিশালী ফ্রন্টএন্ড ফ্রেমওয়ার্ক, যা ডায়নামিক এবং রিচ ইউজার ইন্টারফেস (UI) উপাদান তৈরি করতে ব্যবহৃত হয়। ExtJS-এ বেশ কিছু বেসিক উইজেট বা কম্পোনেন্ট রয়েছে, যা সাধারণত ওয়েব অ্যাপ্লিকেশনের বিভিন্ন ধরনের ইউজার ইন্টারফেস তৈরিতে ব্যবহৃত হয়। এগুলোর মধ্যে অন্যতম হল Button, Panel, Grid, এবং Form।

১. Button (বাটন)

Button হলো একটি কমপোনেন্ট যা ইউজারের সাথে ইন্টারঅ্যাকশন করার জন্য ব্যবহৃত হয়। এটি সাধারণত একটি ক্লিকেবল বাটন হিসেবে কাজ করে, যার মাধ্যমে ইউজার কোনো অ্যাকশন ট্রিগার করে।

বাটন উদাহরণ:

Ext.create('Ext.button.Button', {
    text: 'Click Me', // বাটনের টেক্সট
    renderTo: Ext.getBody(), // বাটনটি কোথায় রেন্ডার হবে
    handler: function() {
        alert('Button Clicked!'); // বাটনে ক্লিক করার পরে যেটি হবে
    }
});

এখানে, text হলো বাটনের টেক্সট এবং handler হলো সেই ফাংশন যা বাটনে ক্লিক করার সময় রান করবে।

২. Panel (প্যানেল)

Panel হলো একটি কন্টেইনার কম্পোনেন্ট যা অন্যান্য কম্পোনেন্ট যেমন বাটন, গ্রিড, টেক্সটফিল্ড ইত্যাদি ধারণ করতে পারে। এটি সাধারণত একটি কন্টেইনার হিসেবে ব্যবহৃত হয় যেখানে UI উপাদানগুলোর পজিশন ও লেআউট নিয়ন্ত্রণ করা হয়।

প্যানেল উদাহরণ:

Ext.create('Ext.panel.Panel', {
    title: 'My Panel', // প্যানেলের শিরোনাম
    width: 300, // প্যানেলের প্রস্থ
    height: 200, // প্যানেলের উচ্চতা
    html: 'Welcome to ExtJS!', // প্যানেলের ভিতরের HTML কনটেন্ট
    renderTo: Ext.getBody() // যেখানে প্যানেল রেন্ডার হবে
});

এখানে, title প্যানেলের শিরোনাম এবং html প্যানেলের ভিতরের কনটেন্ট। renderTo দ্বারা প্যানেলটি কনটেইনারের মধ্যে রেন্ডার হবে।

৩. Grid (গ্রিড)

Grid হলো একটি টেবিল-স্টাইলের কম্পোনেন্ট, যা ডেটা ভিউ এবং ম্যানেজমেন্টের জন্য ব্যবহৃত হয়। এটি ব্যবহার করে ডেটাকে কলাম আকারে প্রদর্শন করা হয় এবং বিভিন্ন ফিচার যেমন সোর্টিং, ফিল্টারিং, পেজিনেশন ইত্যাদি সহজে ইনপুট করা যায়।

গ্রিড উদাহরণ:

Ext.create('Ext.grid.Panel', {
    title: 'User List',
    store: {
        fields: ['name', 'email', 'phone'],
        data: [
            { 'name': 'John', 'email': 'john@example.com', 'phone': '12345' },
            { 'name': 'Jane', 'email': 'jane@example.com', 'phone': '67890' }
        ]
    },
    columns: [
        { text: 'Name', dataIndex: 'name', flex: 1 },
        { text: 'Email', dataIndex: 'email', flex: 2 },
        { text: 'Phone', dataIndex: 'phone', flex: 1 }
    ],
    renderTo: Ext.getBody()
});

এখানে, store ডেটার উৎস হিসেবে কাজ করে এবং columns দ্বারা গ্রিডের কলামসমূহ নির্ধারণ করা হয়। dataIndex প্রতিটি কলামে প্রদর্শিত ডেটা নির্ধারণ করে।

৪. Form (ফর্ম)

Form হল একটি UI কম্পোনেন্ট, যা ইউজারের ইনপুট গ্রহণ করতে ব্যবহৃত হয়। ফর্মে বিভিন্ন ধরনের ফিল্ড থাকে যেমন টেক্সটফিল্ড, রেডিও বাটন, চেকবক্স ইত্যাদি, যা ইউজার ডেটা সংগ্রহের জন্য ব্যবহৃত হয়।

ফর্ম উদাহরণ:

Ext.create('Ext.form.Panel', {
    title: 'User Form',
    width: 300,
    bodyPadding: 10,
    items: [
        {
            xtype: 'textfield', // টেক্সটফিল্ড
            name: 'name',
            fieldLabel: 'Name',
            allowBlank: false // ইনপুট শূন্য হতে পারে না
        },
        {
            xtype: 'textfield', // টেক্সটফিল্ড
            name: 'email',
            fieldLabel: 'Email',
            vtype: 'email' // ইমেইল ফরম্যাট ভ্যালিডেশন
        }
    ],
    buttons: [
        {
            text: 'Submit',
            handler: function() {
                var form = this.up('form').getForm();
                if (form.isValid()) {
                    alert('Form Submitted!');
                }
            }
        }
    ],
    renderTo: Ext.getBody()
});

এখানে, xtype দ্বারা বিভিন্ন ফর্ম ফিল্ড যেমন textfield বা radio নির্বাচন করা হয় এবং allowBlank, vtype দ্বারা ইনপুট ভ্যালিডেশন করা হয়। handler দ্বারা বাটন ক্লিক করার পর যেটি কার্যকর হবে।

সারাংশ

• Button (বাটন): ক্লিকেবল উপাদান যা ইউজারের ইন্টারঅ্যাকশন গ্রহণ করে এবং একটি অ্যাকশন ট্রিগার করে।
• Panel (প্যানেল): একটি কন্টেইনার কম্পোনেন্ট যা অন্যান্য UI উপাদান ধারণ করে।
• Grid (গ্রিড): একটি টেবিল-স্টাইল কম্পোনেন্ট যা ডেটা ভিউ এবং ম্যানেজমেন্টের জন্য ব্যবহৃত হয়।
• Form (ফর্ম): ইউজারের ইনপুট গ্রহণ করার জন্য ব্যবহৃত একটি ফর্ম কম্পোনেন্ট, যা বিভিন্ন ধরনের ফিল্ড ধারণ করে।

ExtJS এর বেসিক উইজেটসমূহ ব্যবহার করে, আপনি খুব দ্রুত এবং দক্ষতার সাথে ইউজার ইন্টারফেস তৈরি করতে পারেন। এগুলি ব্যবহার করে আপনি একাধিক কম্পোনেন্ট কাস্টমাইজ করতে এবং ডেটার উপর কার্যকরী ইন্টারঅ্যাকশন তৈরি করতে পারবেন।

ExtJS একটি শক্তিশালী ফ্রেমওয়ার্ক যা বিভিন্ন ধরনের UI কম্পোনেন্ট সরবরাহ করে এবং এগুলির মধ্যে Interaction ও Event Handling এর মাধ্যমে অ্যাপ্লিকেশনের কার্যক্ষমতা বৃদ্ধি করা যায়। ExtJS কম্পোনেন্টগুলির মধ্যে ইন্টারঅ্যাকশন এবং ইভেন্ট হ্যান্ডলিং গুরুত্বপূর্ণ ভূমিকা পালন করে, যা অ্যাপ্লিকেশনকে ইন্টারেক্টিভ এবং ব্যবহারকারী-বান্ধব করে তোলে।

১. Components এর মধ্যে Interaction

ExtJS এ, components হল UI উপাদান (যেমন গ্রিড, প্যানেল, বাটন, টেক্সটফিল্ড ইত্যাদি), যেগুলি একে অপরের সাথে ইন্টারঅ্যাক্ট করতে পারে। Interaction এর মাধ্যমে বিভিন্ন কম্পোনেন্টের মধ্যে তথ্য আদান-প্রদান, ডেটা আপডেট এবং অন্যান্য কার্যকলাপ করা যায়।

Components এর মধ্যে Interaction উদাহরণ:

ধরা যাক, একটি ComboBox এবং একটি Grid কম্পোনেন্ট রয়েছে এবং আমরা ComboBox থেকে একটি সিলেক্ট করা মানের উপর ভিত্তি করে Grid কম্পোনেন্টের ডেটা আপডেট করতে চাই।

Ext.create('Ext.panel.Panel', {
    renderTo: Ext.getBody(),
    width: 500,
    height: 400,
    title: 'ComboBox Interaction Example',
    layout: 'vbox',
    items: [
        {
            xtype: 'combo',
            fieldLabel: 'Select Category',
            store: ['Category 1', 'Category 2', 'Category 3'],
            listeners: {
                select: function(combo, records) {
                    // ComboBox এর সিলেকশন পরিবর্তিত হলে Grid আপডেট হবে
                    var selectedCategory = records[0].get('field1');
                    grid.getStore().filter('category', selectedCategory);
                }
            }
        },
        {
            xtype: 'grid',
            reference: 'grid',
            title: 'Data Grid',
            store: {
                fields: ['id', 'name', 'category'],
                data: [
                    { id: 1, name: 'Item 1', category: 'Category 1' },
                    { id: 2, name: 'Item 2', category: 'Category 2' },
                    { id: 3, name: 'Item 3', category: 'Category 3' }
                ]
            },
            columns: [
                { text: 'ID', dataIndex: 'id' },
                { text: 'Name', dataIndex: 'name' },
                { text: 'Category', dataIndex: 'category' }
            ]
        }
    ]
});

এখানে, ComboBox এর মধ্যে একটি সিলেকশন পরিবর্তন হলে, তার উপর ভিত্তি করে Grid এর ডেটা আপডেট করা হচ্ছে। এটি একটি Interaction এর উদাহরণ, যেখানে দুটি কম্পোনেন্ট একে অপরের সাথে ইন্টারঅ্যাক্ট করছে।

২. Event Handling

ExtJS তে, কম্পোনেন্টগুলির সাথে ইভেন্ট হ্যান্ডলিং অত্যন্ত গুরুত্বপূর্ণ। প্রতিটি কম্পোনেন্টের নিজস্ব ইভেন্ট থাকে (যেমন click, change, select ইত্যাদি), এবং আপনি এই ইভেন্টগুলো হ্যান্ডল করার মাধ্যমে অ্যাপ্লিকেশনের আচরণ নিয়ন্ত্রণ করতে পারেন।

Event Handling উদাহরণ:

1. Button Click Event:

একটি Button কম্পোনেন্টের click ইভেন্ট হ্যান্ডল করা:

Ext.create('Ext.Button', {
    text: 'Click Me',
    renderTo: Ext.getBody(),
    handler: function() {
        Ext.Msg.alert('Button Clicked', 'You clicked the button!');
    }
});

এখানে, handler প্রপার্টি ব্যবহার করে বাটনের click ইভেন্টটি হ্যান্ডল করা হয়েছে। বাটনে ক্লিক করার সাথে সাথে একটি অ্যালার্ট ডায়ালগ বক্স প্রদর্শিত হবে।

2. TextField Change Event:

একটি TextField কম্পোনেন্টে ব্যবহারকারী কোন টেক্সট প্রবেশ করলে change ইভেন্টটি ট্রিগার হয়:

Ext.create('Ext.form.field.Text', {
    fieldLabel: 'Enter Text',
    renderTo: Ext.getBody(),
    listeners: {
        change: function(field, newValue, oldValue) {
            console.log('Text changed from ' + oldValue + ' to ' + newValue);
        }
    }
});

এখানে, change ইভেন্টটি যখন ট্রিগার হবে, তখন এটি পরিবর্তিত মান এবং আগের মানকে কনসোলে লগ করবে।

3. Grid Row Click Event:

Grid কম্পোনেন্টে একটি রো ক্লিক করা হলে ইভেন্ট হ্যান্ডল করা:

Ext.create('Ext.grid.Panel', {
    title: 'Click a Row',
    renderTo: Ext.getBody(),
    store: {
        fields: ['name', 'email'],
        data: [
            { name: 'John', email: 'john@example.com' },
            { name: 'Jane', email: 'jane@example.com' }
        ]
    },
    columns: [
        { text: 'Name', dataIndex: 'name' },
        { text: 'Email', dataIndex: 'email' }
    ],
    listeners: {
        itemclick: function(grid, record) {
            Ext.Msg.alert('Row Clicked', 'You clicked: ' + record.get('name'));
        }
    }
});

এখানে, গ্রিডে একটি রো ক্লিক করার পর itemclick ইভেন্টটি ট্রিগার হয় এবং একটি অ্যালার্ট ডায়ালগ বক্সে ক্লিক করা রোয়ের নাম প্রদর্শিত হয়।

ExtJS তে Event Propagation এবং Bubbling

Event Propagation এবং Event Bubbling হল দুটি গুরুত্বপূর্ণ ধারণা যা ইভেন্ট হ্যান্ডলিংয়ের সময় ঘটতে পারে:

1. Event Propagation:
   • এটি ইভেন্টের বিস্তার নির্দেশ করে, যেখানে একটি ইভেন্ট একটি DOM এলিমেন্টে ঘটে এবং তার পরবর্তী উপাদানগুলিতে ছড়িয়ে পড়ে।
2. Event Bubbling:
   • ইভেন্ট বাবলিং হলো যখন একটি ইভেন্ট একটি DOM উপাদানে ঘটে এবং তার পরবর্তী উপাদান থেকে উপরের দিকে (প্যারেন্ট এলিমেন্টে) উঠে আসে।

ইভেন্ট বুবলিং উদাহরণ:

Ext.create('Ext.panel.Panel', {
    title: 'Parent Panel',
    renderTo: Ext.getBody(),
    listeners: {
        click: function() {
            alert('Parent Panel clicked!');
        }
    },
    items: [{
        xtype: 'button',
        text: 'Click Me',
        listeners: {
            click: function() {
                alert('Button clicked!');
            }
        }
    }]
});

এখানে, প্রথমে Button ক্লিক করলে বাচ্চা কম্পোনেন্টের ইভেন্ট হ্যান্ডল হবে, তারপর প্যারেন্ট কম্পোনেন্টের ইভেন্ট হ্যান্ডল হবে (ইভেন্ট বাবলিং)।

সারাংশ

• Interaction: ExtJS কম্পোনেন্টগুলির মধ্যে তথ্য আদান-প্রদান এবং কম্পোনেন্টগুলির একে অপরের সাথে কাজ করার প্রক্রিয়া। উদাহরণস্বরূপ, ComboBox থেকে একটি মান সিলেক্ট করা হলে গ্রিডের ডেটা আপডেট করা।
• Event Handling: ExtJS কম্পোনেন্টের ইভেন্টগুলো (যেমন: click, change, select ইত্যাদি) হ্যান্ডল করার প্রক্রিয়া। আপনি কম্পোনেন্টের নির্দিষ্ট ইভেন্টের উপর ভিত্তি করে অ্যাপ্লিকেশনের আচরণ নিয়ন্ত্রণ করতে পারেন।

ExtJS তে কম্পোনেন্টের মধ্যে Interaction এবং ইভেন্ট হ্যান্ডলিং ব্যবহার করে আপনি একটি ইন্টারেক্টিভ এবং ব্যবহারকারী-বান্ধব অ্যাপ্লিকেশন তৈরি করতে পারেন।

ExtJS এ Component Lifecycle হলো একটি কম্পোনেন্টের (যেমন, প্যানেল, গ্রিড, ফর্ম ইত্যাদি) জীবনচক্রের ধারাবাহিকতা। এটি একটি কম্পোনেন্ট তৈরির পর থেকে তার ধ্বংস হওয়া পর্যন্ত ঘটানো বিভিন্ন ইভেন্ট এবং ধাপগুলিকে বোঝায়। এর মধ্যে কম্পোনেন্টের ইনিশিয়ালাইজেশন, রেন্ডারিং, রেসাইজিং, ইন্টারঅ্যাকশন, এবং ধ্বংস প্রক্রিয়া অন্তর্ভুক্ত থাকে।

Component Lifecycle Overview

একটি ExtJS কম্পোনেন্ট সাধারণত নির্মাণ (Creation), রেন্ডারিং (Rendering), ইন্টারঅ্যাকশন (Interaction) এবং ধ্বংস (Destruction) এই চারটি প্রধান পর্যায়ে কাজ করে। প্রতিটি পর্যায়ে বিশেষ ফাংশনালিটি সম্পাদিত হয় এবং বিভিন্ন Lifecycle Hooks (লাইফসাইকেল হুকস) ব্যবহার করা হয়।

Component Lifecycle এর ধাপসমূহ

1. Creation (নির্মাণ)
   • কম্পোনেন্ট তৈরি করা হয় যখন Ext.create() অথবা Ext.Component এর ইনস্ট্যান্স তৈরি করা হয়।
   • initComponent() মেথডে কম্পোনেন্টের প্রাথমিক কনফিগারেশন সেটআপ করা হয়।
2. Rendering (রেন্ডারিং)
   • কম্পোনেন্ট রেন্ডার করা হয় DOM (Document Object Model) এ। এই সময়ে কম্পোনেন্টের UI উপাদান ব্যবহারকারীর ব্রাউজারে প্রদর্শিত হয়।
   • afterRender() মেথডে UI উপাদান রেন্ডার করার পরে অতিরিক্ত কার্যক্রম সম্পাদিত হয়।
3. Interaction (ইন্টারঅ্যাকশন)
   • ব্যবহারকারীরা কম্পোনেন্টের সাথে ইন্টারঅ্যাকশন শুরু করে (যেমন: ক্লিক, টেক্সট ইনপুট)।
   • onRender() এর মধ্যে কম্পোনেন্টের ইভেন্ট হ্যান্ডলিং মেথডের সাথে কাজ করা হয়।
4. Destruction (ধ্বংস)
   • কম্পোনেন্ট ধ্বংস হলে, তার সাথে সম্পর্কিত ইভেন্ট লিসেনার এবং অন্যান্য সম্পদ মুক্ত করা হয়।
   • destroy() মেথড ব্যবহার করে কম্পোনেন্ট ধ্বংস করা হয় এবং এর সম্পদ মুক্ত করা হয়।

Lifecycle Hooks (লাইফসাইকেল হুকস)

ExtJS তে বিভিন্ন লাইফসাইকেল হুকস থাকে যা কম্পোনেন্টের বিভিন্ন ধাপের মধ্যে কল হয়। এগুলি বিশেষ মেথড যা ডেভেলপারদের কম্পোনেন্টের জীবনচক্রের বিভিন্ন সময়ে অতিরিক্ত কার্যক্রম সম্পাদন করার সুযোগ দেয়।

১. initComponent()

• ব্যবহার: কম্পোনেন্ট তৈরি হওয়ার সময়, এটি প্রথমে কল হয়। এখানে কম্পোনেন্টের প্রাথমিক কনফিগারেশন এবং ইনিশিয়াল সেটআপ করা হয়।
• ফাংশনালিটি: কনফিগারেশন সেট করা, স্টোর সংযোগ, এবং অন্যান্য বিল্ট-ইন ফিচার কনফিগারেশন করা।

উদাহরণ:

Ext.define('MyApp.view.MyComponent', {
    extend: 'Ext.Component',
    initComponent: function() {
        // কম্পোনেন্টের জন্য কনফিগারেশন সেট
        this.html = 'Hello, World!';
        this.callParent(arguments); // প্যারেন্ট ক্লাসের initComponent মেথড কল করা
    }
});

২. afterRender()

• ব্যবহার: এই মেথডটি রেন্ডারিং সম্পন্ন হওয়ার পরে কল হয়।
• ফাংশনালিটি: কম্পোনেন্টের UI উপাদান সম্পূর্ণভাবে রেন্ডার হওয়ার পরে অতিরিক্ত কার্যক্রম সম্পাদন করা।

উদাহরণ:

Ext.define('MyApp.view.MyComponent', {
    extend: 'Ext.Component',
    afterRender: function() {
        // রেন্ডারিং পরবর্তী কার্যক্রম
        console.log('Component Rendered');
        this.callParent(arguments);
    }
});

৩. onRender()

• ব্যবহার: কম্পোনেন্টের DOM (HTML) উপাদান সম্পূর্ণ রেন্ডার হওয়ার পর কল হয়।
• ফাংশনালিটি: কম্পোনেন্টের ইভেন্ট লিসেনার বা অন্যান্য কার্যক্রম শুরু করা।

উদাহরণ:

Ext.define('MyApp.view.MyComponent', {
    extend: 'Ext.Component',
    onRender: function() {
        // UI রেন্ডারিং শেষে কার্যক্রম
        console.log('Component DOM Rendered');
        this.callParent(arguments);
    }
});

৪. destroy()

• ব্যবহার: যখন কম্পোনেন্ট ধ্বংস হয়, এটি কল হয়। কম্পোনেন্ট ধ্বংসের সময় ব্যবহৃত সম্পদ, ইভেন্ট লিসেনার ইত্যাদি মুক্ত করা হয়।
• ফাংশনালিটি: সমস্ত প্রক্রিয়া বন্ধ করা, ইভেন্ট লিসেনার মুছে ফেলা, এবং অন্যান্য পরিষ্কার কার্যক্রম।

উদাহরণ:

Ext.define('MyApp.view.MyComponent', {
    extend: 'Ext.Component',
    destroy: function() {
        // ধ্বংসের সময় অতিরিক্ত কার্যক্রম
        console.log('Component Destroyed');
        this.callParent(arguments);
    }
});

ExtJS কম্পোনেন্ট লাইফসাইকেল এভেন্টগুলোর সারাংশ

সারাংশ

ExtJS এর Component Lifecycle এবং Lifecycle Hooks ডেভেলপারদের কম্পোনেন্টের বিভিন্ন ধাপে অতিরিক্ত কার্যক্রম পরিচালনা করার সুযোগ দেয়। কম্পোনেন্ট তৈরির সময় কনফিগারেশন থেকে শুরু করে ধ্বংস হওয়া পর্যন্ত প্রতিটি ধাপে লাইফসাইকেল হুকস কাজ করে, যা অ্যাপ্লিকেশনের পারফরম্যান্স এবং রক্ষণাবেক্ষণকে সহজ করে তোলে। initComponent(), afterRender(), onRender(), এবং destroy() এর মতো লাইফসাইকেল হুকস আপনাকে আরো নিয়ন্ত্রিত এবং কার্যকর কম্পোনেন্ট ডেভেলপমেন্টের সুযোগ প্রদান করে।